<template>
        <div class="uploadMode">
            <section id="upLoadInfo" class="wrap">
                <div class="upLoadList clearfix">
                    <div class="listLeft">
                        <p class="modeInfo">
                            <label>模型名称：</label>
                            <input placeholder="请输入模型名称" type="text" v-model="modeName" maxlength="20">
                        </p>
                        <div class="modeInfo" @mouseover="modifyOver" @mouseout="modifyOut">
                            <label>模型文件：</label>
                            <!-- <input type="file" class="uploadPackage"> -->
                            <div class="iconfont icon-shuoming legend">
                            <div class="legendInfo">
                                <span></span>
                                <ul class="legendInfoList">
                                    <li>1.模型 材质 灯光 必须完整且与效果图相符（单体模型可无灯光，场景模型必须要完整灯光），否则不予通过</li>
                                    <li>2.贴图文件夹，要求：包含模型文件所有贴图，若有IES光域网文件也须包含在内，否则不予通过</li>
                                    <li>3.渲染图分辨率建议分辨率为1200以上</li>
                                    <li>4.建议将模型转存为较低版本，方便用户使用，以提高下载量</li>
                                    <li>5.建议渲染多张角度图片和线框图，展示模型细节</li>
                                </ul>
                            </div>
                            </div>
                            <div class="form-group aetherupload-wrapper"><!--组件最外部需要有一个名为aetherupload-wrapper的id，用以包装组件-->
                                <div class="controls">
                                    <input type="file" class="uploadeModeFile file" onchange="aetherupload(this,'model').success(someCallback).upload()" accept=".rar,.zip"><!--需要有一个名为file的id，用以标识上传的文件，aetherupload(file,group)中第二个参数为分组名，success方法可用于声名上传成功后的回调方法名-->
                                    <div class="progress" style="height:37px;margin-bottom: 2px;margin-top: 10px;">
                                        <div class="progressbar" style="background-color:#ea514b;height:37px;width:0;"></div><!--需要有一个名为progressbar的id，用以标识进度条-->
                                    </div>
                                    <span style="font-size:12px;color:#aaa;" class="output"></span><!--需要有一个名为output的id，用以标识提示信息-->
                                    <input type="hidden" name="file1" class="savedpath packageFile" id="packageFileSize" fileSize=""><!--需要有一个名为savedpath的id，用以标识文件保存路径的表单字段，还需要一个任意名称的name-->
                                    <div class="progressBox">
                                        <div class="progressBoxChild" :style="{width:imageUrl}">{{imageName}}<i v-if="successShow" class="imgSuccess"></i></div>
                                        <div class="modify" v-if="modify">点击修改</div>
                                    </div>
                                </div>
                            </div>
                            
                            
                            <div class="fileStart">
                                {{defaultImgName}}
                            </div>
                           <!--  <div class="progressBox">
                                <div id="progressBoxChild" :style="{width:imageUrl}">{{imageName}}<i v-if="successShow" class="imgSuccess"></i></div>
                                <div class="modify" v-if="modify">点击修改</div>
                            </div> -->
                        </div>
                        
                        <p class="designBox clearfix">
                            <label> 渲染图：</label>
                            <ul>
                                <li>
                                    
                                    <div class="form-group aetherupload-wrapper"><!--组件最外部需要有一个名为aetherupload-wrapper的id，用以包装组件-->

                                    <div class="angleBox">
                                        <img :src="angle1" alt="">
                                        <i @click="hide(1)"></i>
                                    </div>
                                        <div class="controls">
                                            <input type="file" class="uploadeModeFile file" onchange="aetherupload(this,'image').success(someCallback).upload()" accept="image/jpeg,image/jpg,image/png"><!--需要有一个名为file的id，用以标识上传的文件，aetherupload(file,group)中第二个参数为分组名，success方法可用于声名上传成功后的回调方法名-->
                                            <div class="progress" style="height:37px;margin-bottom: 2px;margin-top: 10px;">
                                                <div class="progressbar" style="background-color:#ea514b;height:37px;width:0;"></div><!--需要有一个名为progressbar的id，用以标识进度条-->
                                            </div>
                                            <!-- <span style="font-size:12px;color:#aaa;" id="output"></span>需要有一个名为output的id，用以标识提示信息 -->
                                            <input type="hidden" name="file1" class="savedpath imageName1"><!--需要有一个名为savedpath的id，用以标识文件保存路径的表单字段，还需要一个任意名称的name-->
                                            
                                        </div>

                                        <div class="avatar-uploader-icon uploadMainBox">
                                            <span class="uploadMain">上传主图</span>
                                            <span class="clickUpload clickUploadOne">点击上传</span>
                                        </div>
                                        <div class="uoloadProgressBox" style="display:none">
                                            <div class="uoloadProgress">
                                                <span :style="{width:progressW}" class="uoloadProgressChild progressBoxChild"></span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <p>角度一</p>
                                </li>
                                <li>
                                    <div class="form-group aetherupload-wrapper"><!--组件最外部需要有一个名为aetherupload-wrapper的id，用以包装组件-->

                                    <div class="angleBox">
                                        <img :src="angle1" alt="">
                                        <i @click="hide(2)"></i>
                                    </div>
                                        <div class="controls">
                                            <input type="file" class="uploadeModeFile file" onchange="aetherupload(this,'image').success(someCallback).upload()" accept="image/jpeg,image/jpg,image/png"><!--需要有一个名为file的id，用以标识上传的文件，aetherupload(file,group)中第二个参数为分组名，success方法可用于声名上传成功后的回调方法名-->
                                            <div class="progress" style="height:37px;margin-bottom: 2px;margin-top: 10px;">
                                                <div class="progressbar" style="background-color:#ea514b;height:37px;width:0;"></div><!--需要有一个名为progressbar的id，用以标识进度条-->
                                            </div>
                                            <!-- <span style="font-size:12px;color:#aaa;" id="output"></span>需要有一个名为output的id，用以标识提示信息 -->
                                            <input type="hidden" name="file1" class="savedpath imageName2"><!--需要有一个名为savedpath的id，用以标识文件保存路径的表单字段，还需要一个任意名称的name-->
                                            
                                        </div>

                                        
                                        <div class="avatar-uploader-icon uploadMainBox">
                                            <span class="clickUpload clickUploadOne">点击上传</span>
                                        </div>
                                        <div class="uoloadProgressBox" style="display:none">
                                            <div class="uoloadProgress">
                                                <span class="uoloadProgressChild"></span>
                                            </div>
                                        </div>
                                    </div>
                                   
                                    <p>角度二</p>
                                </li>
                                <li>
                                    
                                    <div class="form-group aetherupload-wrapper"><!--组件最外部需要有一个名为aetherupload-wrapper的id，用以包装组件-->

                                    <div class="angleBox">
                                        <img :src="angle1" alt="">
                                        <i @click="hide(3)"></i>
                                    </div>
                                        <div class="controls">
                                            <input type="file" class="uploadeModeFile file" onchange="aetherupload(this,'image').success(someCallback).upload()" accept="image/jpeg,image/jpg,image/png"><!--需要有一个名为file的id，用以标识上传的文件，aetherupload(file,group)中第二个参数为分组名，success方法可用于声名上传成功后的回调方法名-->
                                            <div class="progress" style="height:37px;margin-bottom: 2px;margin-top: 10px;">
                                                <div class="progressbar" style="background-color:#ea514b;height:37px;width:0;"></div><!--需要有一个名为progressbar的id，用以标识进度条-->
                                            </div>
                                            <!-- <span style="font-size:12px;color:#aaa;" id="output"></span>需要有一个名为output的id，用以标识提示信息 -->
                                            <input type="hidden" name="file1" class="savedpath imageName3"><!--需要有一个名为savedpath的id，用以标识文件保存路径的表单字段，还需要一个任意名称的name-->
                                            
                                        </div>

                                       
                                        <div class="avatar-uploader-icon uploadMainBox">
                                            <span class="clickUpload clickUploadOne">点击上传</span>
                                        </div>
                                        <div class="uoloadProgressBox" style="display:none">
                                            <div class="uoloadProgress">
                                                <span class="uoloadProgressChild"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <p>角度三</p>
                                </li>
                                <li>
                                   
                                    <div class="form-group aetherupload-wrapper"><!--组件最外部需要有一个名为aetherupload-wrapper的id，用以包装组件-->

                                    <div class="angleBox">
                                        <img :src="angle1" alt="">
                                        <i @click="hide(4)"></i>
                                    </div>
                                        <div class="controls">
                                            <input type="file" class="uploadeModeFile file" onchange="aetherupload(this,'image').success(someCallback).upload()" accept="image/jpeg,image/jpg,image/png"><!--需要有一个名为file的id，用以标识上传的文件，aetherupload(file,group)中第二个参数为分组名，success方法可用于声名上传成功后的回调方法名-->
                                            <div class="progress" style="height:37px;margin-bottom: 2px;margin-top: 10px;">
                                                <div class="progressbar" style="background-color:#ea514b;height:37px;width:0;"></div><!--需要有一个名为progressbar的id，用以标识进度条-->
                                            </div>
                                            <!-- <span style="font-size:12px;color:#aaa;" id="output"></span>需要有一个名为output的id，用以标识提示信息 -->
                                            <input type="hidden" name="file1" class="savedpath imageName4"><!--需要有一个名为savedpath的id，用以标识文件保存路径的表单字段，还需要一个任意名称的name-->
                                            
                                        </div>

                                        
                                        <div class="avatar-uploader-icon uploadMainBox">
                                            <span class="clickUpload clickUploadOne">点击上传</span>
                                        </div>
                                        <div class="uoloadProgressBox" style="display:none">
                                            <div class="uoloadProgress">
                                                <span class="uoloadProgressChild"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <p>角度四</p>
                                </li>
                                <li>
                                   
                                    <div class="form-group aetherupload-wrapper"><!--组件最外部需要有一个名为aetherupload-wrapper的id，用以包装组件-->

                                    <div class="angleBox">
                                        <img :src="angle1" alt="">
                                        <i @click="hide(5)"></i>
                                    </div>
                                        <div class="controls">
                                            <input type="file" class="uploadeModeFile file" onchange="aetherupload(this,'image').success(someCallback).upload()" accept="image/jpeg,image/jpg,image/png"><!--需要有一个名为file的id，用以标识上传的文件，aetherupload(file,group)中第二个参数为分组名，success方法可用于声名上传成功后的回调方法名-->
                                            <div class="progress" style="height:37px;margin-bottom: 2px;margin-top: 10px;">
                                                <div class="progressbar" style="background-color:#ea514b;height:37px;width:0;"></div><!--需要有一个名为progressbar的id，用以标识进度条-->
                                            </div>
                                            <!-- <span style="font-size:12px;color:#aaa;" id="output"></span>需要有一个名为output的id，用以标识提示信息 -->
                                            <input type="hidden" name="file1" class="savedpath imageName5"><!--需要有一个名为savedpath的id，用以标识文件保存路径的表单字段，还需要一个任意名称的name-->
                                            
                                        </div>

                                        
                                        <div class="avatar-uploader-icon uploadMainBox">
                                            <span class="clickUpload clickUploadOne">点击上传</span>
                                        </div>
                                        <div class="uoloadProgressBox" style="display:none">
                                            <div class="uoloadProgress">
                                                <span class="uoloadProgressChild"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <p>角度五</p>
                                </li>
                            </ul>
                        </p> 
                        <div class="selectBox">
                            <label>3DsMax版本：</label>
                            <template>
                                <el-select v-model="threeValue" placeholder="请选择3DsMax版本">
                                    <el-option
                                    v-for="(item,i) in threeDoptions"
                                    :key="i"
                                    :value="item">
                                    </el-option>
                                </el-select>
                            </template>
                        </div>
                        <div class="selectBox">
                            <label>渲染器类型：</label>
                            <template>
                                <el-select v-model="RendererValue" placeholder="请选择渲染器类型">
                                    <el-option
                                    v-for="(item,i) in RendererType"
                                    :key="i"
                                    :value="item">
                                    </el-option>
                                </el-select>
                            </template>
                        </div>
                        <div class="selectBox selectTwo clearfix">
                            <label>模型分类：</label>
                            <template>
                            <el-select v-model="modeSort1" placeholder="请选择" @change="modeSort1Change" >
                                <el-option
                                v-for="item in modeSort1List[1]"
                                :key="item.id"
                                :value="item.catname"
                                >
                                </el-option>
                            </el-select>
                            <el-select
                                    v-model="modeSort2"
                                    collapse-tags
                                    style="margin-left: 20px;"
                                    placeholder="请选择"
                                    @change="modeSort2Change">
                                    <el-option
                                    v-for="item in modeSort2List"
                                    :key="item.id"
                                    :value="item.catname">
                                    </el-option>
                                </el-select>
                            </template>

                        </div>
                        <div class="selectBox">
                            <label>设计风格：</label>
                            <template>
                                <el-select v-model="designStyle" placeholder="请选择设计风格" @change="designStyleChange">
                                    <el-option
                                    v-for="item in designStyleList"
                                    :key="item.id"
                                    :value="item.catname">
                                    </el-option>
                                </el-select>
                            </template>
                        </div>
                        <div class="selectBox">
                            <label>有无灯光：</label>
                            <template>
                                <el-select v-model="lighting" placeholder="有无灯光" @change="lightingChange">
                                    <el-option
                                    v-for="(item,i) in lightingList"
                                    :key="i"
                                    :value="item">
                                    </el-option>
                                </el-select>
                            </template>
                        </div>
                        <!-- <div class="selectBox">
                            <label class="describe">描述：</label>
                            <el-input
                            type="textarea"
                            :rows="5"
                            placeholder="请添加模型的描述"
                            v-model="textarea">
                            </el-input>
                        </div> -->
                        <upload-explain :readColor="readColorMsg" @readColorFn="readColorFn"></upload-explain>
                        <div class="goUpload">
                            <el-button type="warning" :disabled="disTrue" @click="goUpload(user)">立即上传</el-button>
                        </div>
                    </div>
                    <list-right></list-right>
                </div>
            </section>
            
        </div>
</template>
<script>
import axios from 'axios'
import listRight from './listRight'
import uploadExplain from './uploadExplain'
export default {
    name:"upload3D",
    props:["user"],
     data() {
      return {
        readColorMsg:true,//同意上传说明
        imageUrl: 0,//上传压缩包
        imageName: "",//压缩包名字
        defaultImgName: "点击上传文件附件压缩包",
        modify : false,//控制修改的显示隐藏
        successShow : false,//控制对勾的隐藏
        angle1 : "",//角度一图片地址
        progress : true,//角度一进度条的显示
        progressW : 0,//角度一进度条的宽度
        angle2 : "",//角度二图片地址
        progress2 : true,//角度二进度条的显示
        progressW2 : 0,//角度二进度条的宽度
        angle3 : "",//角度三图片地址
        progress3 : true,//角度三进度条的显示
        progressW3 : 0,//角度三进度条的宽度
        angle4 : "",//角度四图片地址
        progress4 : true,//角度四进度条的显示
        progressW4 : 0,//角度四进度条的宽度
        angle5 : "",//角度五图片地址
        progress5 : true,//角度五进度条的显示
        progressW5 : 0,//角度五进度条的宽度
        modeName:"",//模型名称
        threeDoptions:["2010","2011","2012","2013","2014","2015","2016","2017","2018","2019"],//3DMax版本
        threeValue:"",//3DMax内容
        RendererType:["Vray","CR"],//渲染器类型
        RendererValue:"",//渲染器内容
        lighting:"",//灯光
        lightingList:["有","无"],//灯光内容
        lightingKey:"",//有无灯光的key
        designStyle:"",//设计风格
        designStyleList:[],//设计风格列表
        designStyleKey:"",//设计风格的key
        modeSort1:"",//模型分类
        modeSort1List:[],//模型分类列表
        modeSort1key:"",//模块分类1的key
        modeSort2:"",
        modeSort2List:[],//模型分类2列表
        modeSort2key:"",//模块分类2的key
        textarea: '',
        disTrue:false,//禁止立即上传按钮
        
    }
  },
  methods: {
      readColorFn(){//是否阅读
          this.readColorMsg = !this.readColorMsg;
      },
      lightingChange(){//确定有无灯光
          if(this.lighting=="有"){
              this.lightingKey="1"
          }else if(this.lighting=="无"){
                this.lightingKey="0"
          }
      },
      designStyleChange(){//设计风格发生变化时
        var designStyleKeyArr =  this.designStyleList.filter((e)=>{
            return e.catname == this.designStyle;
        })
        this.designStyleKey = designStyleKeyArr[0].id;
      },
      modeSort1Change(){//分类一发生变化时
        var modeList2Key = this.modeSort1List[1].filter((e)=>{
                    return e.catname==this.modeSort1
            })
        this.modeSort1key = modeList2Key[0].id;//获取到一级分类的id  一级分类的id是二级分类的key值
        this.modeSort2List = this.modeSort1List[this.modeSort1key];
        this.modeSort2 = this.modeSort2List[0].catname;
        this.modeSort2Change();
      },
    modeSort2Change(){//分类二发生改变时
        var modeList2Key = this.modeSort2List.filter((e)=>{
                    return e.catname==this.modeSort2
            })
        this.modeSort2key = modeList2Key[0].id; //获取到一级分类的id  一级分类的id是二级分类的key值
       
    },
    //删除角度5图片
    hide(num){
        var $box = $($(".aetherupload-wrapper")[num]);
    //   this.level = 0;
    //   this.angle1 = "";

        $box.find($(".angleBox")).css("z-index","0");
        $box.find($(".angleBox")).find("img").attr("src","");
        $box.find($(".uploadMainBox")).show();
    },
    //压缩包上传时的
    handleProgress(file, fileList){
        this.successShow = false;//对勾的显示隐藏
        this.defaultImgName = '';//压缩包的名字
        this.imageUrl = 0;//压缩包上传时的进度条
        this.imageUrl = Math.ceil(file.percent)+"%";
        this.imageName = fileList.name
        if(file.percent==100){
            this.successShow = true;
        }
    },
//点击修改
    modifyOver(){
        if(this.successShow){
            this.modify = true;
        }
        
    },
    modifyOut(){
        this.modify = false; 
    },
    openMsg(content) {
    this.$message({
        message: content,
        type: 'error',
        customClass : 'errorMsg',
        duration : 1500,
        showClose : true,
    });
    },
    goUpload(user){//立即上传按钮
        if(!this.modeName){//标题内容
            this.openMsg("请输入模型名称");
            return;
        }else if(!$(".packageFile").val()){//未上传压缩包
            this.openMsg("请上传文件附件压缩包");
            return;
        }else if(!$(".imageName1").val()){//未上传主图
            this.openMsg("请上传主图");
            return;
        }else if(!this.threeValue){//选择3dMax版本
            this.openMsg("请选择3DsMax版本");
            return;
        }else if(!this.RendererValue){//选择渲染器类型
            this.openMsg("请选择渲染器类型");
            return;
        }else if(!this.modeSort1key){//模型风格
            this.openMsg("请选择模型分类");
            return;
        }else if(!this.designStyleKey){//设计风格
            this.openMsg("请选择设计风格");
            return;
        }else if(!this.lightingKey){//灯光
            this.openMsg("有无灯光");
            return;
        }else if(!this.readColorMsg){//阅读说明
            this.openMsg("请阅读上传说明");
            return;
        }
        var data = {//上传至后台需要的参数
            type:"1",
            user_id:user.id,
            title:this.modeName,
            file:$(".packageFile").val(),
            filesize:$(".packageFile").first().attr("fileSize"),
            image:$(".imageName1").val(),
            image2:$(".imageName2").val(),
            image3:$(".imageName3").val(),
            image4:$(".imageName4").val(),
            image5:$(".imageName5").val(),
            appversion:this.threeValue,
            renderertype:this.RendererValue,
            cat_id1:this.modeSort1key,
            cat_id2:this.modeSort2key,
            style:this.designStyleKey,
            is_light:this.lightingKey
        };
        this.disTrue = true;
        axios.post('/data/uploadsave',data)
        .then( (response)=> {
            if(response.data.status==1){
                //  this.$router.push("/userCore");
                this.$message({
                    message: '恭喜你，上传成功',
                    type: 'success',
                    customClass : 'errorMsg',
                    duration : 1500,
                    showClose : true,
                    onClose : ()=>{
                        this.$router.go(0)
                    }
                });
                
            }
            
        })
        .catch((error)=> {
            this.openMsg("上传失败，请重试");
            this.disTrue = false;
            console.log(error)
        });  
    }
      
    },
    components:{
        listRight,
        uploadExplain
    },
    beforeMount(){
        axios.get('/data/create/1')
        .then( (response)=> {
            this.designStyleList = response.data.style;//风格分类
            this.modeSort1List = response.data.cats
        })
        .catch((error)=> {
            console.log(error)
        }); 
    }
}
</script>
<style>
@import './upload.css';
.errorMsg{
    position: fixed;
    font-size: 50px;
    margin-top:25%;
}
/* 上传压缩包 */
.modeInfo .aetherupload-wrapper{
    position: absolute;
    top: -10px;
    left: 99px;
    width: 323px;
}
.modeInfo .uploadeModeFile{
    opacity:0;
    z-index: 9;
}
.modeInfo #progressbar,.controls{
    background-image: url(../../img/huixing.png);
    background-repeat: no-repeat;
    background-position: 11px 8px;
}
.designBox .uploadeModeFile {
    width: 98px;
    height: 98px;
    position: absolute;
    top: 0;
    left: 0;
    /* background: red; */
    z-index: 10;
    opacity: 0;
}
.legend{
    position: absolute;
    top: 5px;
    right: 0;
    cursor: pointer;
}
.legendInfoList{
    position: absolute;
    top: 12px;
    left: -23px;
    width: 605px;
    height: 153px;
    background: #fff;
    box-shadow: 0px 2px 7px 5px rgba(177, 177, 177, 0.18);
    font-size: 12px;
    line-height: 28px;
    color: #999999;
    padding: 8px 0 0 20px;
    border-radius: 5px;
    z-index: 10;
}
.legendInfo{
    position: relative;
    display: none;
}
.legendInfo span{
    position: absolute;
    right: -4px;
    top:0px;
    width: 25px;
    height: 12px;
    z-index: 11;
    background: url(../../img/legend.jpg) no-repeat;
}
.legend:hover .legendInfo{
    display: block;
    
}
</style>
